<template>
  <div class="demo-input">
    <pl-input v-model="inputValue"></pl-input>
    <h4>状态</h4>
    <pl-input
      v-for="item in ['primary', 'success', 'warn', 'error', 'info']"
      :key="item"
      :status="item"
      style="margin: 10px"
    ></pl-input>
    <pl-input ref="myInput"></pl-input>
    <button @click="outerClear">outer clear</button>
    <button @click="outerFocus">outer focus</button>
    <button @click="getNew">获取新值</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import Input from '../../../src/packages/input/input';

export default defineComponent({
  name: 'demo-input',
  setup() {
    const inputRef = Input.use.ref('myInput');
    const inputValue = ref('');

    return {
      inputValue,
      outerClear: () => {
        inputRef.value!.methods.clear();
      },
      outerFocus: () => {
        inputRef.value!.methods.focus();
      },
      getNew: () => {
        console.log(inputValue.value);
      },
    };
  },
});
</script>
